﻿<!DOCTYPE html>
<html>
<head>
    <title>订单详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <!--公有引用-->
    <link rel="stylesheet" href="../css/weui.css" />
    <link rel="stylesheet" href="../css/weui2.css" />
    <link rel="stylesheet" href="../css/weui3.css" />

    <script src="../js/zepto.min.js"></script>
    
</head>
<body>
    <!--详情-->
    <div class="pay_title_box" style="position: fixed;z-index:2;top:0;">
        <span class="countdown"></span>
    </div>
    <div class="weui_cells" style="padding-top:20px;">
        <div class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" src="../cdnimg/item_img.jpg" />
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title">歌剧魅影</h4>
                <p class="weui_media_desc f-red"><i class="icon icon-51"></i> 2017-05-13 15:30</p>
                <p class="weui_media_desc"><i class="icon icon-46"></i> 长沙红太阳</p>
                <p class="weui_media_desc"><i class="icon icon-69"></i> 长沙市天心区劳动西路347号田汉大剧院</p>
            </div>
            <div class="weui_order_ft"><a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">查看路线</a></div>
        </div>
    </div>
    
    <div class="weui-form-preview">
        <div class="weui-form-preview-hd">
            <label class="weui-form-preview-label">总额</label>
            <em class="weui-form-preview-value">¥2400.00</em>
        </div>
        <div class="weui-form-preview-bd">
            <p>
                <label class="weui-form-preview-label">时间</label>
                <span class="weui-form-preview-value">2017-05-13 21:00</span>
            </p>
            <p>
                <label class="weui-form-preview-label">楼层</label>
                <span class="weui-form-preview-value">1层</span>
            </p>
            <p>
                <label class="weui-form-preview-label">张数</label>
                <span class="weui-form-preview-value">1张</span>
            </p>
            <p>
                <label class="weui-form-preview-label">总额</label>
                <span class="weui-form-preview-value">¥1520.00</span>
            </p>
        </div>
        <div class="weui-form-preview-ft" style="text-align: left; line-height: 30px; padding: 5px 15px;">
            <ol class="weui-form-preview-value" style="color: #999; font-size: 14px;">
                <li>1层100元区2排18号*1张（含茶）；</li>
                <li>1层100元区2排19号*1张（不含茶）；</li>
            </ol>
        </div>
    </div>
    <div class="weui-form-preview">
        <div class="weui-form-preview-bd">
            <p>
                <label class="weui-form-preview-label">订单编号</label>
                <span class="weui-form-preview-value">ZX2017030700000001</span>
            </p>
            <p>
                <label class="weui-form-preview-label">订单时间</label>
                <span class="weui-form-preview-value">2017-03-07 15:26:30</span>
            </p>
            <p>
                <label class="weui-form-preview-label">订单状态</label>
                <span class="weui-form-preview-value f-red">待付款</span>
            </p>
            <p>
                <label class="weui-form-preview-label">配送方式</label>
                <span class="weui-form-preview-value">自取</span>
            </p>
            <p>
                <label class="weui-form-preview-label">真实姓名</label>
                <span class="weui-form-preview-value">吴小姐</span>
            </p>
            <p>
                <label class="weui-form-preview-label">电话号码</label>
                <span class="weui-form-preview-value">18088888888</span>
            </p>
            <p>
                <label class="weui-form-preview-label">取票地址</label>
                <span class="weui-form-preview-value">长沙市天心区劳动西路347号田汉大剧院</span>
            </p>
        </div>
        <div class="weui-form-preview-ft" style="text-align: left; line-height: 30px; padding: 5px 15px;">
            <div class="weui-form-preview-value" style="color: #999; font-size: 14px;">
                温馨提示：请在演出时间前30分钟取票，过时作废！
            </div>
        </div>
    </div>
    <div class="weui_cells_title" style="height:10px;">&nbsp;</div>
    <div class="weui-flex">
        <div class="weui-flex-item " ><a href="javascript:;" id="cancel_order" class="weui_btn  noradius" style="background-color: #fff; color: #000;">取消订单</a></div>
        <div class="weui-flex-item" ><a href="javascript:;" id="submit_order" class="weui_btn weui_btn_warn  noradius">确认支付</a></div>
    </div>
    <script>
        //15分钟后付款关闭
        var t = 900;//秒数
        function showtime() {
            var m = parseInt((t % (3600 * 24)) % 3600 / 60);
            if (m < 10) {
                m = "0" + m;
            }
            var s = parseInt((t % (3600 * 24)) % 60);
            if (s < 10) {
                s = "0" + s;
            }
            var c = (m == "00") ? "" : '<span>' + m + '</span>:';
            var d = (s == "00") ? "" : '<span>' + s + '</span>';
            t = t - 1;
            if (t < 0){
                $('.countdown').html("支付时间已到，订单付款已关闭！");
                $('#submit_order').addClass("weui_btn_disabled").removeAttr('href').removeAttr('onclick');
                //需要ajax处理改变订单状态为已关闭，防止刷新后付款

            }
                
            else
                $('.countdown').html("支付剩余时间：" + c + d);
        }
        showtime();
        setInterval("showtime()", 1000);

        //取消订单
        $(document).on("click", "#cancel_order", function () {
            $.confirm("您确定要取消订单吗?", "警示", function () {
                $.toast("取消成功!");
            }, function () {
                //取消操作
            });
        });
    </script>
</body>
</html>
